﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns="http://www.w3.org/1999/xhtml"
                                     xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
    <meta charset="utf-8"/>
    <title>商品详情</title>

<!-- Mobile Specific Metas
================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<!-- CSS
================================================== -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="css/colors/green.css" th:href="@{/css/colors/green.css}" id="colors"/>
 
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


	<!-- Header
            ================================================== -->
	<div th:replace="fragments/header :: header"></div>


<!-- Titlebar
================================================== -->
<section class="titlebar">
<div class="container">
	<div class="sixteen columns">
		<h2>萌宠网</h2>
		
		<nav id="breadcrumbs">
			<ul>
				<li><a href="index.html" th:href="@{/index}">首页</a></li>
				<li><a href="shop-full-width.html" th:href="@{/items}">商品</a></li>
				<li>详情</li>
			</ul>
		</nav>
	</div>
</div>
</section>


<div class="container">

<!-- Slider
================================================== -->
	<div class="eight columns" >
		<div class="slider-padding">
			<div id="product-slider" class="royalSlider rsDefault">
			    <img class="rsImg" src="images/猫a.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫a.jpg" alt="" />
			    <img class="rsImg" src="images/猫b.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫b.jpg" alt="" />
			    <img class="rsImg" src="images/猫c.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫c.jpg" alt="" />
			    <img class="rsImg" src="images/猫d.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫d.jpg" alt="" />
			    <img class="rsImg" src="images/猫e.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫e.jpg" alt="" />
			    <img class="rsImg" src="images/猫f.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫f.jpg" alt="" />
			    <img class="rsImg" src="images/猫g.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫g.jpg" alt="" />
			    <img class="rsImg" src="images/猫h.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫h.jpg" alt="" />
			    <img class="rsImg" src="images/猫i.jpg" th:src="@{'/images/' + ${item.image}}" data-rsTmb="images/猫i.jpg" alt="" />
			 </div>
			 <div class="clearfix"></div>
		</div>
	</div>


<!-- Content
================================================== -->
	<div class="eight columns">
		<div class="product-page">
			
			<!-- Headline -->
			<section class="title">
				<h2 th:text="${item.name}"></h2>
				<span class="product-price-discount"><i th:text="'¥' + ${item.price}"></i></span>

				<div class="reviews-counter">
					<div class="rating five-stars">
						<div class="star-rating"></div>
						<div class="star-bg"></div>
					</div>
					<span th:text="${reviews_num} + '个评论'"></span>
				</div>
			</section>

			<!-- Text Parapgraph -->
			<section>
				<p class="margin-reset" th:text="${item.title}"></p>

				<!-- Share Buttons -->	
				<div class="share-buttons">
					<ul>
						<li><a href="#">分享</a></li>
						<li class="share-facebook"><a href="#">QQ</a></li>
						<li class="share-twitter"><a href="#">微信</a></li>
						<li class="share-gplus"><a href="#">微博</a></li>
						<li class="share-pinit"><a href="#">人人网</a></li>
					</ul>
				</div>
				<div class="clearfix"></div>

			</section>


			<!-- Variables
			<section class="variables">

				<div class="four alpha columns">
					<label for="size">体型</label>
					<select id="size" name="size">
						<option>大</option>
						<option>中</option>
						<option>小</option>
						<option>超小</option>
					</select>
				</div>

				<div class="four omega columns">
					<label for="color">颜色</label>
					<select id="color" name="color">
						<option>白色</option>
						<option>黑色</option>
						<option>蓝色</option>
					</select>
				</div>
				<div class="clearfix"></div>

			</section> -->

			<section class="variables">

				<div class="four alpha columns">
					<label th:text="'已售：' + ${item.sales}"></label>
				</div>

				<div class="four omega columns">
					<label th:text="'库存：' + ${item.num}"></label>
				</div>
				<div class="clearfix"></div>

			</section>

			<section class="linking">

					<form th:action='@{/addToCart}' name="cartform" id="cartform">
					    <div class="qtyminus"></div>
					    <input type='text' name="quantity" id="quantity" value='1' class="qty" />
					    <div class="qtyplus"></div>
						<a href="javascript:document.cartform.submit();" class="button adc">加入购物车</a>
						<input type='hidden' name="item_id" id="item_id" th:value="${item.item_id}"/>
					    <div class="clearfix"></div>
				    </form>

			</section>

		</div>
	</div>

</div>


<div class="container">
	<div class="sixteen columns">
			<!-- Tabs Navigation -->
			<ul class="tabs-nav">
				<li class="active"><a href="#tab1">商品描述</a></li>
				<li><a href="#tab2">详细信息</a></li>
				<li><a href="#tab3">评论 <span class="tab-reviews" th:text="'(' + ${reviews_num} + ')'"></span></a></li>
			</ul>

			<!-- Tabs Content -->
			<div class="tabs-container">

				<div class="tab-content" id="tab1">
					<p th:text="${item.description}"></p>
				</div>

				<div class="tab-content" id="tab2">

					<table class="basic-table">
						<tr>
							<th>大小</th>
							<td></td>
						</tr>

						<tr>
							<th>颜色</th>
							<td></td>
						</tr>

						<tr>
							<th>年龄</th>
							<td></td>
						</tr>

						<tr>
							<th>重量</th>
							<td></td>
						</tr>
					</table>

				</div>

				<div class="tab-content" id="tab3">

					<!-- Reviews -->
					<section class="comments">

						<ul th:each="review,reviewStat : ${reviews}">
							<li>
								<div class="avatar"><img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&amp;s=70" alt="" /></div>
								<div class="comment-content"><div class="arrow-comment"></div>
									<div class="comment-by"><strong th:text="'用户' + ${review.user_id} + '***'"></strong><span class="date" th:text="${review.time}"></span>
										<div class="rating five-stars"><div class="star-rating"></div><div class="star-bg"></div></div>
									</div>
									<p th:text="${review.detail}"></p>
								</div>
							</li>
						</ul>

					</section>

				</div>

			</div>
	</div>
</div>



<div class="margin-top-50"></div>

	<!-- Footer
        ================================================== -->
	<div th:replace="fragments/footer :: footer"></div>

</div>

<!-- Java Script
================================================== -->
<div th:replace="fragments/scripts :: scripts"></div>


<!-- Style Switcher
================================================== -->
<div th:replace="fragments/styleswitcher :: styleswitcher"></div>


</body>
</html>
